<template>
  <div>
    <!-- 筛选 -->
    <el-form :inline="true" :model="queryData" class="user-search">
      <div style="display: flex; justify-content: space-between">
        <!-- 日期 -->
        <div style="width: 650px">
          <el-button-group>
            <el-button type="primary" @click="clickTime()">今日</el-button>
            <el-button type="primary" @click="clickTime2()">昨日</el-button>
          </el-button-group>
          <el-date-picker
            v-model="queryData.times"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime">
          </el-date-picker>
        </div>

        <!-- 搜索 -->
        <div>
          <el-input
            style = "width: 230px;"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="queryData.content"
            @change="changeValue">
          </el-input>
          <el-button type="primary" @click="exportTab()">导出</el-button>
        </div>
      </div>
    </el-form>


    <div class="body" flex-direction="row">
      <!-- 左侧列表 -->
      <el-tabs tab-position="left" v-model="leftName" style="height: 600px;" @tab-click="leftHandleClick">
        <!-- 第一 -->
        <el-tab-pane label="沟通内容" name="first">
          <div style="display: flex" flex-direction="row">
            <!-- 中间 -->
            <div style="flex: 3; border-right: 1px solid #ccc; height: 600px;">
              <el-tabs v-model="activeName"  @tab-click="handleClick">
                <el-tab-pane label="外部好友" name="first">
                    <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="queryData.content">
                    </el-input>
                    <div class="demo-basic--circle">
                        <div class="block" v-for="item in list" :key="item.userid" style="padding: 10px; font-size: 17px;">
                            <div @click="getChat(item.userid)">
                                <el-avatar :size="50" :src="item.url" ></el-avatar>
                                {{item.userName}}
                            </div>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="内部好友" name="second">
                    <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="queryData.content">
                    </el-input>
                    <div class="demo-basic--circle">
                        <div class="block" v-for="item in list" :key="item.userid" style="padding: 10px; font-size: 17px;">
                            <div @click="getChat(item.userid)">
                                <el-avatar :size="50" :src="item.url" ></el-avatar>
                                {{item.userName}}
                            </div>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="外部群" name="third">
                    <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="queryData.content">
                    </el-input>
                    <div class="demo-basic--circle">
                        <div class="block" v-for="item in list" :key="item.userid" style="padding: 10px; font-size: 17px;">
                            <div @click="getChat(item.userid)">
                                <el-avatar :size="50" :src="item.url" ></el-avatar>
                                {{item.userName}}
                            </div>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="内部群" name="fourth">
                    <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="queryData.content">
                    </el-input>
                    <div class="demo-basic--circle">
                        <div class="block" v-for="item in list" :key="item.userid" style="padding: 10px; font-size: 17px;">
                            <div @click="getChat(item.userid)">
                                <el-avatar :size="50" :src="item.url" ></el-avatar>
                                {{item.userName}}
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <!-- 右侧 -->
            <div style="flex: 8; height: 600px;">
              <div style="line-height: 40px; padding-left: 30px; font-size: 20px;">
                聊天内容
              </div>
              <el-tabs v-model="activeName1" type="card">
                <el-tab-pane label="信息" name="first">
                    <div v-for="item in wuhu">
                        {{item.chatMessageSend}}
                        {{item.sendTime | formatDate}}
                        {{item.chatMessage}}
                    </div>
                </el-tab-pane>
                <el-tab-pane label="文件" name="second">文件</el-tab-pane>
                <el-tab-pane label="图片" name="third">图片</el-tab-pane>
                <el-tab-pane label="通话信息" name="fourth">通话信息</el-tab-pane>
              </el-tabs>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="新增客户" name="second">
          <el-table size="small" :data="listData1" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column  prop="clientId" label="客户ID">
            </el-table-column>
            <el-table-column  prop="clientName" label="客户名">
            </el-table-column>
            <el-table-column  prop="alternationsTime" label="时间">
            </el-table-column>
          </el-table>
        </el-tab-pane>

          <el-tab-pane label="删除客户" name="third">
              <el-table size="small" :data="listData2" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
                  <el-table-column  prop="clientId" label="客户ID">
                  </el-table-column>
                  <el-table-column  prop="clientName" label="客户名">
                  </el-table-column>
                  <el-table-column  prop="alternationsTime" label="时间">
                  </el-table-column>
              </el-table>
          </el-tab-pane>


          <el-tab-pane label="被客户删除" name="fourth">
              <el-table size="small" :data="listData3" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
                  <el-table-column  prop="clientId" label="客户ID">
                  </el-table-column>
                  <el-table-column  prop="clientName" label="客户名">
                  </el-table-column>
                  <el-table-column  prop="alternationsTime" label="时间">
                  </el-table-column>
              </el-table>
          </el-tab-pane>

        <el-tab-pane label="敏感词" name="fifth">
          <el-table size="small" :data="listData4" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column  prop="deleteTime" label="时间">
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="撤回消息" name="sixth">
          <el-table size="small" :data="listData5" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
              <el-table-column  prop="chatMessageReceive" label="客户ID">
              </el-table-column>
              <el-table-column  prop="clientName" label="客户名">
              </el-table-column>
              <el-table-column  prop="chatMessage" label="撤回内容">
              </el-table-column>
              <el-table-column  prop="sendTime" label="时间">
              </el-table-column>
          </el-table>
        </el-tab-pane>

          <el-tab-pane label="超时回复" name="seventh">
              <el-table size="small" :data="listData6" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
                  <el-table-column  prop="chatMessageReceive" label="客户ID">
                  </el-table-column>
                  <el-table-column  prop="clientName" label="客户名">
                  </el-table-column>
                  <el-table-column  prop="chatMessage" label="客户上条内容">
                  </el-table-column>
                  <el-table-column  prop="sendTime" label="时间">
                  </el-table-column>
              </el-table>
          </el-tab-pane>

          <el-tab-pane label="超时未回复" name="eighth">
              <el-table size="small" :data="listData7" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
                  <el-table-column  prop="chatMessageReceive" label="客户ID">
                  </el-table-column>
                  <el-table-column  prop="clientName" label="客户名">
                  </el-table-column>
                  <el-table-column  prop="chatMessage" label="客户上条内容">
                  </el-table-column>
                  <el-table-column  prop="sendTime" label="时间">
                  </el-table-column>
              </el-table>
          </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "wxDetail",
    props: {
        userId: {
            type: String,
            default: ""
        },
        deptId: {
            type: String,
            default: ""
        },
        empId: {
            type: String,
            default: ""
        }
    },
  data() {
    return{
      loading: false,
      // 搜索框
      queryData: {
        times: [new Date(new Date().getTime() - 24*60*60*1000), new Date()],
        type: '',
        content: '',
      },
      // 所选客户ID
      clientId: '',

      activeName: 'first',
      activeName1: 'first',

      listData1:[],
      listData2:[],
      listData3:[],
      listData4:[],
      listData5:[],
      listData6:[],
      listData7:[],
      // 左侧栏名称
      leftName: 'first',
      wuhu: [],
      list:[
          {
              userid: "1",
              userName: "zhangsan",
              url: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          },
          {
              userid: "2",
              userName: "lisi",
              url: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          },
          {
              userid: "3",
              userName: "wangwu",
              url: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" ,
          },
      ],
    }
  },

  methods: {
      // 内部好友
      getInternalBuddy() {
          let depdId = this.deptId;
          let that = this;
          this.$request("/api/wxFollowUp/getInternalBuddy/1_0", {depdId}, "POST").then((data) => {
              that.list = data.data
          })
      },
      // 外部好友
      getExternalBuddy() {
          let that = this;
          this.$request("/api/wxFollowUp/getExternalBuddy/1_0", {}, "POST").then((data) => {
              that.list = data.data
          })
      },
      // 内部群
      getInternalGroup() {
          let that = this;
          this.$request("/api/wxFollowUp/getInternalGroup/1_0", {}, "POST").then((data) => {
              that.list = data.data
          })
      },
      // 外部群
      getExternalGroup() {
          let that = this;
          this.$request("/api/wxFollowUp/getExternalGroup/1_0", {}, "POST").then((data) => {
              that.list = data.data
          })
      },
      // 横向选项卡切换事件
      handleClick(tab) {
          if ("first" == tab.name) {
              this.getInternalBuddy();
          }
          if ("second" == tab.name) {
              this.getExternalBuddy();
          }
          if ("third" == tab.name) {
              this.getInternalGroup();
          }
          if ("fourth" == tab.name) {
              this.getExternalGroup();
          }
      },
      // 左侧选项卡切换事件
      leftHandleClick(tab) {


          this.leftName = tab.name;
          let empId = '1221332454';
          let mapType = 0;

          let startTime = this.queryData.times[0];
          let endTime = this.queryData.times[1];

          let that = this;

          if ("second" == tab.name) {
              mapType = 1;
              this.$request("/api/wxFollowUp/exportTable/1_0", {empId, mapType, startTime, endTime}, "POST").then((data) => {
                  that.listData1 = data.data
              })
          }
          if ("third" == tab.name) {
              mapType = 2;
              this.$request("/api/wxFollowUp/exportTable/1_0", {empId, mapType, startTime, endTime}, "POST").then((data) => {
                  that.listData2 = data.data
              })
          }
          if ("fourth" == tab.name) {
              mapType = 3;
              this.$request("/api/wxFollowUp/exportTable/1_0", {empId, mapType, startTime, endTime}, "POST").then((data) => {
                  that.listData3 = data.data
              })
          }
          if ("fifth" == tab.name) {
              mapType = 4;
              this.$request("/api/wxFollowUp/exportTable/1_0", {empId, mapType, startTime, endTime}, "POST").then((data) => {
                  that.listData4 = data.data
              })
          }
          if ("sixth" == tab.name) {
              mapType = 5;
              this.$request("/api/wxFollowUp/exportTable/1_0", {empId, mapType, startTime, endTime}, "POST").then((data) => {
                  that.listData5 = data.data
              })
          }
          if ("seventh" == tab.name) {
              mapType = 6;
              this.$request("/api/wxFollowUp/exportTable/1_0", {empId, mapType, startTime, endTime}, "POST").then((data) => {
                  that.listData6 = data.data
              })
          }
          if ("eighth" == tab.name) {
              mapType = 7;
              this.$request("/api/wxFollowUp/exportTable/1_0", {empId, mapType, startTime, endTime}, "POST").then((data) => {
                  that.listData7 = data.data
              })
          }
      },
      // 导出
      exportTab() {
          let that = this;
          this.$request("/api/wxFollowUp/exportTable/1_0", {}, "POST").then((data) => {
          })
      },

      // 选项卡里的列表
      getLists() {
          let empId = '1221332454';
          let startTime = this.queryData.time[0];
          let endTime = this.queryData.time[1];
          let leftName = this.leftName;

          let that = this;
          this.$request("/api/wxFollowUp/getContentById/1_0", {empId, startTime, endTime, leftName}, "POST").then((data) => {
              //that.wuhu = data.data.listOne;
              that.loading = true;

              that.loading = false;
          })
      },
      // 聊天记录
      getChat(id) {
          if (id != ''){
              this.clientId = id;
          }
          if (this.clientId != '') {
              let empId = '1221332454';
              let startTime = this.queryData.times[0].getTime();
              let endTime = this.queryData.times[1].getTime();

              let type = this.activeName1;
              let clienId = id;
              let content = this.queryData.content;

              let that = this;
              this.$request("/api/wxFollowUp/getChatRecord/1_0", {empId, clienId, startTime, endTime, type, content}, "POST").then((data) => {
                  that.wuhu = data.data;
              })
          }
      },
      // 今日按钮
      clickTime() {
          let date = new Date();
          let date2 = new Date(date.getTime() + 24*60*60*1000);

        this.queryData.times[0] = date.getTime();
        this.queryData.times[1] = date2.getTime();
        this.getChat();
      },
      // 昨日按钮
      clickTime2() {
          let date = new Date();
          let date2 = new Date(date.getTime() - 24*60*60*1000);

          this.queryData.times[0] = date2.getTime();
          this.queryData.times[1] = date.getTime();
        this.getChat();
      },
      // 时间段按钮
      changeTime() {
          this.getChat();
      },
      // 搜索框
      changeValue() {
          this.getChat();
      },
  },
    mounted(){
        // this.getInternalBuddy();
        this.getLists();
    },
}
</script>

<style scoped>
.body {border-top: 1px solid #ccc; margin-top: 20px;}

/deep/ .el-tabs__header{margin: 0 0 1px 0;}

/deep/ .el-tabs--left .el-tabs__header.is-left {margin-right: 0;}
</style>
